<template>
  <div v-if="hasPerm('sysMachine:query')">

    <!-- Runtime -->
    <a-row :gutter="24">
      <a-col :md="12" :sm="24">
        <a-card :loading="loading" title="Runtime" style="margin-bottom: 20px" :bordered="false">

          <table class="sysInfo_table" >
            <tr >
              <td class="sysInfo_td">os:</td>
              <td class="sysInfo_td">{{ this.os.goos }}</td>
            </tr>

            <tr >
              <td class="sysInfo_td">cpu nums:</td>
              <td class="sysInfo_td">{{ this.os.numCpu }}</td>
            </tr>

            <tr >
              <td class="sysInfo_td">go version:</td>
              <td class="sysInfo_td">{{ this.os.goVersion }}</td>
            </tr>
            <tr >
              <td class="sysInfo_td">goroutine nums:</td>
              <td class="sysInfo_td">{{ this.os.numGoroutine }}</td>
            </tr>
          </table>
        </a-card>
      </a-col>
      <!-- disk -->
      <a-col :md="12" :sm="24">
        <a-card :loading="loading" title="Disk" style="margin-bottom: 20px">
          <table class="sysInfo_table" >

            <tr >
              <td class="sysInfo_td">total (MB)</td>
              <td class="sysInfo_td">{{ this.disk.totalMb }}</td>
            </tr>

            <tr >
              <td class="sysInfo_td">used (MB)</td>
              <td class="sysInfo_td">{{ this.disk.usedMb }}</td>
            </tr>

            <tr >
              <td class="sysInfo_td">total (GB)</td>
              <td class="sysInfo_td">{{ this.disk.totalGb }}</td>
            </tr>

            <tr >
              <td class="sysInfo_td">used (GB)</td>
              <td class="sysInfo_td">{{ this.disk.usedGb }}</td>
            </tr>
          </table>
        </a-card>
      </a-col>
    </a-row>

    <!-- cpu -->
    <a-row :gutter="24">
      <a-col :md="12" :sm="24">
        <a-card :loading="loading" title="CPU" style="margin-bottom: 20px" :bordered="false">

          <table class="sysInfo_table" >
            <tr >
              <td class="sysInfo_td">physical number of cores:</td>
              <td class="sysInfo_td">{{ this.cpu.cores }}</td>
            </tr>
            <template v-for="(item, index) in this.cpu.cpus">
              <tr :key="index" :gutter="10">
                <td class="sysInfo_td">core {{ index }}</td>
                <td class="sysInfo_td"><a-progress :percent="item" size="small" /></td>
              </tr>
            </template>
          </table>
        </a-card>
      </a-col>

      <a-col :md="12" :sm="24">
        <a-card :loading="loading" title="Ram" style="margin-bottom: 20px">
          <table class="sysInfo_table" >

            <tr >
              <td class="sysInfo_td">total (MB)</td>
              <td class="sysInfo_td">{{ this.ram.totalMb }}</td>
            </tr>

            <tr >
              <td class="sysInfo_td">used (MB)</td>
              <td class="sysInfo_td">{{ this.ram.usedMb }}</td>
            </tr>

            <tr >
              <td class="sysInfo_td">total (GB)</td>
              <td class="sysInfo_td">{{ this.ram.totalMb / 1024 }}</td>
            </tr>

            <tr >
              <td class="sysInfo_td">used (GB)</td>
              <td class="sysInfo_td">{{ (this.ram.usedMb / 1024).toFixed(2) }}</td>
            </tr>
          </table>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
  import { sysMachineQuery } from '@/api/modular/system/machineManage'

  export default {
    data () {
      return {
        loading: true,
        cpu: [],
        disk: [],
        os: [],
        ram: [],
        colors: [
          { color: '#5cb87a', percentage: 20 },
          { color: '#e6a23c', percentage: 40 },
          { color: '#f56c6c', percentage: 80 }
        ]
      }
    },

    // 进页面加载
    created () {
      this.loadDataList()
    },

    methods: {
      // 加载数据方法
      loadDataList () {
        sysMachineQuery().then((res) => {
          this.loading = false
          this.cpu = res.data.cpu
          this.disk = res.data.disk
          this.os = res.data.os
          this.ram = res.data.ram
        })
      }
    }

  }
</script>

<style lang="less">
  .sysInfo_table{
    width: 100%; min-height: 45px; line-height: 45px; text-align: center;
  }
  .sysInfo_td {
  border-bottom:1px solid #e8e8e8;
  }
</style>
